// 导航守卫（路由守卫）
import router from '@/router/index'
// 引入实例stroe
import store from '@/store'
// 引入进度条
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式

router.beforeEach(async(to, from, next) => {
  // 开启进度条
  NProgress.start()

  const whiteList = ['/login', '/404'] // 定义白名单  所有不受权限控制的页面
  // to 目标 from来源 next下一步

  // 判断有没有token
  if (store.getters.token) {
    // 有token  判断是否去登录页
    if (to.path === '/login') {
      // 是从登录页跳转 跳转到首页
      next('/')
    } else {
      // 先调用用户的基本资料 保证所有页面都有用户信息
      // 是异步请求  所以要先请求完成在进行下一步next() 所以要用.then 或 async await 处理
      // 当页面跳转的时候获取用户详细信息 但不是每次跳转都需要请求 当已经请求过 用户详细信息已经存储在vuex中了就不用再次请求
      //  所以做判断 当userInfo中有数据则不用再次请求
      if (!store.getters.name) { // 因为在getters中已经映射了userInfo.username 所以直接store.getters.name获取数据做判断
        // if (!store.state.user.userInfo) { 这种判断空对象会产生误判, 因为 {} 总是返回 true
        await store.dispatch('user/getUserInfo')
        // 获取到用户信息之后 再判断是否有权限（菜单栏的显示）
        // 因为在路由配置的时候将静态路由去掉 当前的数据只是用来判断是否有该路由是否显示 但是路由并没有添加进去 要用addRoutes中才能真正实现跳转
        const routes = await store.dispatch('permission/filterRouter', store.state.user.userInfo.roles.menus)
        // 但是路由本身的设置并不是直接改数组这么简单, 需要一个方法叫做 addRoutes
        // 所以这个地方出了渲染菜单没问题以外, 还得拿到筛选后的有权限列表, 进行添加
        // vue-router提供了一个addRoutes的API 这个方法是用来动态添加路由的
        // 静态路由与动态路由都没有找到才跳转到404页面
        router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }])
        // 固定写法
        // 因为addRoutes函数调用的时间已经是在配置路由之后 不能马上继续next 需要原地跳转  所以要将to.path地址作为next的参数
        next(to.path)
      }

      // 直接放行
      next()
    }
  } else {
    //   没有token
    if (whiteList.indexOf(to.path) > -1) { // 判断是否是需要经过导航守卫的页面  true表示不用经过
      // 直接跳转
      next()
    } else {
      // 跳转到登录页面
      next('/login')
    }
  }
  NProgress.done() // 手动强制关闭一次  为了解决 手动切换地址时  进度条的不关闭的问题
})

router.afterEach(function() {
// 关闭进度条
  NProgress.done()
})
